
<template>
  <div class="user-coupon" :style="containerStyle">
    <!-- 标题部分 -->
    <div class="coupon-header">
      <h3 class="coupon-title">{{ data.title || '我的优惠券' }}</h3>
      <div v-if="data.showMore" class="coupon-more">
        查看更多 <el-icon><ArrowRight /></el-icon>
      </div>
    </div>

    <!-- 默认优惠券列表 -->
    <div
      v-if="!data.items || !data.items.length"
      class="coupon-container"
      :class="containerClass"
      :style="containerStyle"
    >
      <div
        v-for="index in defaultItemCount"
        :key="index"
        class="coupon-item"
        :class="itemClass"
        :style="itemStyle"
      >
        <!-- 优惠券图片 -->
        <div class="coupon-image">
          <img
            :src="defaultCouponImage"
            alt="优惠券图片"
          />

          <!-- 优惠券标签 -->
          <div v-if="data.showTag" class="coupon-tag">
            <span>#</span> {{ data.tagText || '优惠券' }}
          </div>
        </div>

        <!-- 优惠券信息 -->
        <div class="coupon-info" :style="infoStyle">
          <!-- 优惠券名称 -->
          <h5 class="coupon-name">{{ defaultCouponName }}</h5>

          <!-- 阅读量和点赞数 -->
          <div class="coupon-stats">
            <span v-if="data.showReadCount" class="read-count">
              {{ defaultReadCount }} 阅读
            </span>
            <span v-if="data.showLikeCount" class="like-count">
              <el-icon><Star /></el-icon> {{ defaultLikeCount }}
            </span>
          </div>
        </div>
      </div>
    </div>

    <!-- 优惠券数据列表 -->
    <div
      v-else
      class="coupon-container"
      :class="containerClass"
      :style="containerStyle"
    >
      <div
        v-for="(item, index) in data.items"
        :key="index"
        class="coupon-item"
        :class="itemClass"
        :style="itemStyle"
        @click="handleItemClick(item)"
      >
        <!-- 优惠券图片 -->
        <div class="coupon-image">
          <img
            :src="item.image || defaultCouponImage"
            :alt="item.title"
          />

          <!-- 优惠券标签 -->
          <div v-if="data.showTag && item.tag" class="coupon-tag">
            <span>#</span> {{ item.tag }}
          </div>
        </div>

        <!-- 优惠券信息 -->
        <div class="coupon-info" :style="infoStyle">
          <!-- 优惠券名称 -->
          <h5 class="coupon-name">{{ item.title }}</h5>

          <!-- 阅读量和点赞数 -->
          <div class="coupon-stats">
            <span v-if="data.showReadCount" class="read-count">
              {{ item.readCount || defaultReadCount }} 阅读
            </span>
            <span v-if="data.showLikeCount" class="like-count">
              <el-icon><Star /></el-icon> {{ item.likeCount || defaultLikeCount }}
            </span>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部更多 -->
    <div v-if="data.showBottomMore" class="coupon-more-bottom">
      查看更多 <el-icon><ArrowRight /></el-icon>
    </div>

    <!-- 删除组件 -->
    <slot name="deles" />
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { ArrowRight, Star } from '@element-plus/icons-vue'

// 定义组件属性
const props = defineProps({
  data: {
    type: Object,
    default: () => ({})
  },
  styles: {
    type: Object,
    default: () => ({})
  }
})

// 定义事件
const emit = defineEmits(['item-click'])

// 默认数据
const defaultItemCount = computed(() => {
  if (props.data.displayMode === 'grid') {
    return 4
  } else if (props.data.displayMode === 'list') {
    return 2
  }
  return 3
})

const defaultCouponImage = computed(() => '/src/assets/images/default-coupon.png')
const defaultCouponName = computed(() => '优惠券名称')
const defaultReadCount = computed(() => '999')
const defaultLikeCount = computed(() => '999')

// 优惠券容器样式
const containerClass = computed(() => {
  const classes = []

  if (props.data.displayMode === 'grid') {
    classes.push('coupon-grid')
  } else if (props.data.displayMode === 'list') {
    classes.push('coupon-list')
  }

  return classes.join(' ')
})

const containerStyle = computed(() => {
  return {
    paddingTop: `${props.data.paddingTop || 10}px`,
    paddingLeft: `${props.data.paddingHorizontal || 15}px`,
    paddingRight: `${props.data.paddingHorizontal || 15}px`,
    backgroundColor: props.data.backgroundColor || '#ffffff'
  }
})

// 优惠券项样式
const itemClass = computed(() => {
  const classes = []

  if (props.data.displayMode === 'grid') {
    classes.push('coupon-item-grid')
  } else if (props.data.displayMode === 'list') {
    classes.push('coupon-item-list')
  }

  return classes.join(' ')
})

const itemStyle = computed(() => {
  const style = {
    marginBottom: `${props.data.itemMargin || 15}px`,
    borderRadius: `${props.data.borderRadius || 0}px`
  }

  if (props.data.displayMode === 'grid') {
    style.width = props.data.gridColumns === 2 
      ? `calc(50% - ${props.data.itemMargin / 2}px)`
      : `calc(33.33% - ${props.data.itemMargin / 3}px)`
  } else if (props.data.displayMode === 'list') {
    style.width = '100%'
    style.display = 'flex'
  }

  if (props.data.cardStyle === 'shadow') {
    style.boxShadow = '0 2px 8px rgba(93, 113, 127, 0.08)'
  } else if (props.data.cardStyle === 'border') {
    style.border = '1px solid rgba(50, 50, 51, 0.1)'
  }

  return style
})

// 优惠券信息样式
const infoStyle = computed(() => {
  return {
    background: props.data.cardStyle === 'transparent' ? 'none' : '#fff'
  }
})

// 事件处理
function handleItemClick(item) {
  emit('item-click', item)
}
</script>

<style lang="scss" scoped>
.user-coupon {
  width: 100%;
  box-sizing: border-box;

  .coupon-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 15px;

    .coupon-title {
      margin: 0;
      font-size: 16px;
      color: #323233;
      font-weight: 400;
      width: 270px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .coupon-more {
      color: #969799;
      font-size: 12px;
      display: flex;
      align-items: center;
      cursor: pointer;

      .el-icon {
        margin-left: 5px;
      }
    }
  }

  .coupon-more-bottom {
    text-align: center;
    color: #969799;
    font-size: 12px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    .el-icon {
      margin-left: 5px;
    }
  }

  .coupon-container {
    box-sizing: border-box;

    // 网格布局
    &.coupon-grid {
      display: flex;
      flex-wrap: wrap;

      .coupon-item {
        &.coupon-item-grid {
          display: flex;
          flex-direction: column;
          overflow: hidden;
          cursor: pointer;

          .coupon-image {
            position: relative;
            width: 100%;
            padding-top: 60%;

            img {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              object-fit: cover;
            }

            .coupon-tag {
              position: absolute;
              bottom: 10px;
              left: 10px;
              background-color: rgba(0, 0, 0, 0.6);
              color: #fff;
              padding: 2px 8px;
              border-radius: 4px;
              font-size: 12px;

              span {
                margin-right: 5px;
              }
            }
          }

          .coupon-info {
            padding: 10px;
            flex: 1;

            .coupon-name {
              margin: 0 0 5px;
              font-size: 14px;
              color: #333;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }

            .coupon-stats {
              display: flex;
              align-items: center;
              font-size: 12px;
              color: #999;

              .read-count {
                margin-right: 15px;
              }

              .like-count {
                display: flex;
                align-items: center;

                .el-icon {
                  margin-right: 5px;
                }
              }
            }
          }
        }
      }
    }

    // 列表布局
    &.coupon-list {
      .coupon-item {
        &.coupon-item-list {
          display: flex;
          overflow: hidden;
          cursor: pointer;
          margin-bottom: 15px;

          .coupon-image {
            width: 100px;
            height: 100px;
            flex-shrink: 0;
            position: relative;

            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }

            .coupon-tag {
              position: absolute;
              bottom: 10px;
              left: 10px;
              background-color: rgba(0, 0, 0, 0.6);
              color: #fff;
              padding: 2px 8px;
              border-radius: 4px;
              font-size: 12px;

              span {
                margin-right: 5px;
              }
            }
          }

          .coupon-info {
            flex: 1;
            padding: 10px;

            .coupon-name {
              margin: 0 0 5px;
              font-size: 14px;
              color: #333;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }

            .coupon-stats {
              display: flex;
              align-items: center;
              font-size: 12px;
              color: #999;

              .read-count {
                margin-right: 15px;
              }

              .like-count {
                display: flex;
                align-items: center;

                .el-icon {
                  margin-right: 5px;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
